* {
  margin: 0;
  padding: 0;
}

.nav {
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #e4e4e4;
}

.box {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
}

.box .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5000;
  left: 0;
  top: 0;
  background-color: transparent;
}

.box .plane {
  position: absolute;
  width: 43px;
  height: 33px;
  left: 3%;
  top: calc(40% - 15px);
  background-image: url(../images/plane.png);
  z-index: 100;
  animation: planeIn 0.5s linear;
}

@keyframes planeIn {
  from {
    left: -50px;
  }
  to {
    left: 2%;
  }
}

.box .plane .exhaust {
  width: 42px;
  height: 42px;
  position: absolute;
  left: -42px;
  top: -5px;
  background-image: url(../images/exhaust.png);
  background-size: cover;
  transform: rotate(90deg);
  animation: exhaust 0.1s linear infinite;
}

@keyframes exhaust {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

.box .fire {
  position: absolute;
  width: 10px;
  height: 5px;
  background-color: red;
  z-index: -100;
  background-image: linear-gradient(to right, white, #09ef0c);
  border-radius: 0 45% 45% 0;
}

.box .tank {
  position: absolute;
  top: calc(40% - 44px);
  width: 54px;
  height: 84px;
  display: inline-block;
  transform: rotate(90deg);
  transition: 0.5s;
  animation: tankIn 0.2s linear;
  left: calc(100% - 80px);
}

@keyframes tankIn {
  from {
    left: calc(100% + 60px);
  }
  to {
    left: calc(100% - 80px);
  }
}

.box .tank .hp {
  position: absolute;
  width: 30px;
  height: 100%;
  line-height: 20px;
  font-size: 16px;
  color: yellowgreen;
  top: 0;
  left: -27px;
  box-sizing: border-box;
  padding: 2px 4px;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: center;
}
